<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { UploadImg } from '@/components/UploadFile'
import * as ProjectManagerApi from '@/api/creative/smart-media/production'

const createProjectFormRef = ref<FormInstance>()
const createProjectVisible = ref(false)
const createProjectForm = reactive({
  title: '',
  description: '',
  timeline: '',
  coverURL: '',
  templateId: '',
  clipsParam: '',
  templateType: '',
  projectType: 'EditingProject'
})
const createProjectFormRules = reactive({
  title: [{ required: true, message: '请输入项目名称', trigger: ['blur', 'input'] }]
})

const router = useRouter()

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (!valid) {
      ElMessage.error('请检查输入是否正确')
      return
    }
    ProjectManagerApi.createEditingProject(createProjectForm).then((res) => {
      const { projectId } = res.project

      ElMessage.success('创建成功')
      createProjectVisible.value = false
      if (createProjectForm.templateType === 'VETemplate') {
        router.push('/creative/media/advanced-template-editor?projectId=' + projectId)
      } else {
        router.push('/creative/media/editor?projectId=' + projectId)
      }
    })
  })
}

defineExpose({
  open: (
    templateInfo: null | { templateId: string; clipsParam: string; templateType: string } = null
  ) => {
    createProjectFormRef.value?.resetFields()
    if (templateInfo) {
      createProjectForm.templateId = templateInfo.templateId
      createProjectForm.clipsParam = templateInfo.clipsParam
      createProjectForm.templateType = templateInfo.templateType
    }
    createProjectVisible.value = true
  }
})
</script>

<template>
  <el-dialog
    title="创建项目"
    v-model="createProjectVisible"
    close-on-click-modal
    close-on-press-escape
    width="30%"
  >
    <el-form
      ref="createProjectFormRef"
      :model="createProjectForm"
      :rules="createProjectFormRules"
      label-width="100px"
    >
      <el-form-item label="项目名称" prop="title">
        <el-input v-model="createProjectForm.title" />
      </el-form-item>
      <el-form-item label="项目描述" prop="description">
        <el-input v-model="createProjectForm.description" type="textarea" />
      </el-form-item>
      <el-form-item label="封面" prop="coverURL">
        <UploadImg v-model="createProjectForm.coverURL" />
      </el-form-item>
      <el-form-item label="模板id" prop="templateId">
        <el-input v-model="createProjectForm.templateId" disabled />
      </el-form-item>
      <el-form-item label="模板参数" prop="clipsParam">
        <el-input v-model="createProjectForm.clipsParam" type="textarea" disabled />
      </el-form-item>
      <el-form-item label="模板类型" prop="templateType">
        <el-input v-model="createProjectForm.templateType" disabled />
      </el-form-item>
      <el-form-item label="时间线" prop="timeline">
        <el-input v-model="createProjectForm.timeline" type="textarea" disabled />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(createProjectFormRef)">创建项目</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped></style>
